<template>
  <div class="dashboard-editor-container">
    <el-card>
      <el-form :model="form" style="margin-top:10px;" size="mini" label-position="top" ref="form">
        <el-row :gutter="10">
          <el-col :lg="4" :md="6">
            <el-form-item label="交易所属渠道" prop="TRANSCHANNEL">
            <el-select v-model="form.TRANSCHANNEL" size="mini" filterable clearable placeholder="请选择交易所属渠道">
              <el-option
                v-for="item in channelOption"
                :key="item.FIELDKEY"
                :label="item.FIELDVALUE"
                :value="item.FIELDKEY"
              ></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="交易码" prop="TRANSCODE">
              <el-input size="mini" placeholder="请输入交易码" v-model="form.TRANSCODE"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="交易名称" prop="TRANSNAME">
              <el-input size="mini" placeholder="请输入交易名称" v-model="form.TRANSNAME"></el-input>
            </el-form-item>
          </el-col>
          <el-col :lg="4" :md="6">
            <el-form-item label="交易类型" prop="TRANSTYPE">
              <el-select v-model="form.TRANSTYPE" size="mini" filterable clearable placeholder="请选择交易类型">
                <el-option
                  v-for="item in transTypeOption"
                  :key="item.code"
                  :label="item.val"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :md="12" class="searchBtnMarginTop">
            <el-button
              type="primary"
              icon="el-icon-search"
              :loading="loading"
              size="mini"
              @click="tradeQuery"
            >查询</el-button>
            <el-button
              type="warning"
              size="mini"
              icon="el-icon-refresh"
              @click="clearForm('form')"
            >重置</el-button>
            <el-button
              type="success"
              size="mini"
              icon="el-icon-plus"
              @click="openEditDialog('','add')"
            >新增</el-button>
          </el-col>
        </el-row>
      </el-form>
      <el-row>
        <el-col>
          <el-table
            :data="tableData"
            class="tableMarginTop"
            border
            highlight-current-row
            ref="tableData"
          >
            <el-table-column prop="TRANSCHANNEL" label="交易所属渠道" align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop="TRANSCODE" label="交易码" align="center"></el-table-column>
            <el-table-column prop="TRANSNAME" label="交易名称" align="center"></el-table-column>
            <el-table-column prop="TRANSTYPE" label="交易类型" align="center" :formatter="dataFormat"></el-table-column>
            <el-table-column prop="CRTDATETIME" label="创建时间" align="center"></el-table-column>
            <el-table-column prop="ALTDATETIME" label="修改时间" align="center"></el-table-column>
            <el-table-column prop="OPERATOR" label="操作人" align="center"></el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="200">
              <template slot-scope="scope">
                <div>
                  <el-button
                    type="warning"
                    size="mini"
                    icon="el-icon-edit"
                    @click="openEditDialog(scope.row,'update')"
                  >修改</el-button>
                  <el-button
                    type="danger"
                    size="mini"
                    icon="el-icon-delete"
                    @click="delData(scope.row)"
                  >删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-pagination
            style="text-align: right; margin-top:20px;"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            @size-change="handleInSizeChange"
            @current-change="handleInCurrentChange"
            :current-page="currpage"
            background
            layout="total,sizes, prev, pager, next, jumper"
            :total="tableTotal"
          ></el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <component :is="dialogList.editDialog" :option="editOptions" @refreshTable="tradeQuery"></component>
  </div>
</template>

<script>
import toolBox from "@/common/utils/toolBox";
import getGlobalParams from "@/common/utils/getGlobalParams";
import request from "@/common/utils/requestWFM";
import query from "@/message/wfm/FTEForecast/tradingManage/tradeQuery";
import del from "@/message/wfm/FTEForecast/tradingManage/tradeMainTain";
import editDialog from "./dialog/editDialog";
import dictionary from "@/message/wfm/baseData/dictionaryManage/dictionaryQuery";

export default {
  mounted() {
    this.tradeQuery();
    this.dictionaryQuery("CHANNELTYPE").then(
      value => (this.channelOption = value)
    );
  },
  data() {
    return {
      tableData: [],
      channelOption: [], //渠道类型
      transTypeOption: [
        { code: "01", val: "对私" },
        { code: "02", val: "对公" }
      ],
      dialogList: {
        editDialog
      },
      editOptions: {
        isShow: false,
        title: "",
        row: {}
      },
      loading: false,
      tableTotal: 1,
      currpage: 1,
      pageSize: getGlobalParams.get("PageSize"),
      form: {
        TRANSCHANNEL: "",
        TRANSCODE: "",
        TRANSNAME: "",
        TRANSTYPE: ""
      }
    };
  },
  methods: {
    async tradeQuery() {
      let resBody = new query();
      resBody.data.TRANSCHANNEL =
        this.form.TRANSCHANNEL == "" ? "C001" : this.form.TRANSCHANNEL;
      resBody.data.TRANSCODE = this.form.TRANSCODE;
      resBody.data.TRANSNAME = this.form.TRANSNAME;
      resBody.data.TRANSTYPE = this.form.TRANSTYPE;
      resBody.data.PageFlag = 4;
      resBody.data.CurrPage = this.currpage;
      resBody.data.PageRowNum = 10;
      console.log(resBody);
      let response = await request(resBody);
      if (response.SYS_HEAD.ReturnCode == "000000") {
        console.log(response);
        this.tableData = response.BODY.RSPSTRUCT;
        this.tableTotal = response.BODY.TotalRowNum;
        this.currpage = response.BODY.NowPageNum;
      } else {
        this.$message({
          type: "error",
          message:
            "请求失败，错误码:" +
            response.SYS_HEAD.ReturnCode +
            "，错误信息：" +
            response.SYS_HEAD.ReturnMessage
        });
      }
    }, //打开修改新增Dialog
    async openEditDialog(row, flag) {
      this.editOptions.flag = flag;
      this.editOptions.transTypeOption = this.transTypeOption;
      this.editOptions.channelOption = this.channelOption;
      if (flag == "add") {
        this.editOptions.isShow = true;
        this.editOptions.title = "新增交易码与交易类型关系数据";
      } else {
        this.editOptions.isShow = true;
        this.editOptions.title = "修改交易码与交易类型关系数据";
        this.editOptions.row = row;
      }
    },
    //前端分页
    handleInCurrentChange(val) {
      this.currpage = val;
      // console.log(`当前页: ${val}`);
      this.tradeQuery();
    },
    handleInSizeChange(val) {
      this.pageSize = val;
      this.tradeQuery();
    },
    //删除
    delData(row) {
      this.$confirm("此操作将删除该字段, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          let resBody = new del();
          resBody.data.TRANSCHANNEL = row.TRANSCHANNEL;
          resBody.data.TRANSCODE = row.TRANSCODE;
          resBody.data.TRANSNAME = row.TRANSNAME;
          resBody.data.TRANSTYPE = row.TRANSTYPE;
          resBody.data.OPERTYPE = "03";
          let response = await request(resBody);
          if (response.SYS_HEAD.ReturnCode == "000000") {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.tradeQuery();
          } else {
            this.$message({
              type: "error",
              message:
                "请求失败，错误码:" +
                response.SYS_HEAD.ReturnCode +
                "，错误信息：" +
                response.SYS_HEAD.ReturnMessage
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },

    async dictionaryQuery(type) {
      let resBody = new dictionary();
      resBody.data.FIELDCODE = type;
      resBody.data.CurrPage = 1;
      resBody.data.PageRowNum = 400;
      let response = await request(resBody);
      if (response.SYS_HEAD.ReturnCode == "000000") {
        return response.BODY.FIEDATA;
      } else {
        this.$message({
          type: "error",
          message:
            "请求失败，错误码:" +
            response.SYS_HEAD.ReturnCode +
            "，错误信息：" +
            response.SYS_HEAD.ReturnMessage
        });
      }
    },
    // 重置查询条件
    clearForm(item) {
      // 重置表格
      this.$refs["" + item].resetFields();
    },
    dataFormat(row, column) {
      if (column.property == "TRANSTYPE")
        return row[column.property] == "01"
          ? "对私"
          : row[column.property] == "02"
          ? "对公"
          : row[column.property];
      if (column.property == "TRANSCHANNEL")
        return this.findName(this.channelOption, row[column.property]);
    },
    findName(arr, val) {
      let data = arr.filter(item => {
        return item.FIELDKEY == val;
      });
      if (data.length) return data[0].FIELDKEY + " - " + data[0].FIELDVALUE;
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>